<template>
  <div class="rank">
    <BackNav :title="title" :nav-bg="navBg"></BackNav>
    <SongSheet :rank-data="rankData" v-if="hasData"></SongSheet>
  </div>
</template>

<script>
  import SongSheet from "../components/SongSheet";
  import BackNav from "../components/BackNav";
  export default {
    name: "Rank",
    components: {
      BackNav,
      SongSheet
    },
    data(){
      return {
        title: '',
        hasData: false,
        id: 0,
        rankData: {
          title: '',
          sum: 0,
          backgroundUrl: '',
          rankList: []
        },
        navBg: 'rgba(34, 40, 49, 0.5)'
      };
    },
    methods: {
      initList(name){
        switch (name) {
          case '云音乐飙升榜':
            this.id = 3;
            break;
          case '云音乐新歌榜':
            this.id = 0;
            break;
          case '网易原创歌曲榜':
            this.id = 2;
            break;
          case '云音乐热歌榜':
            this.id = 1;
            break;
          case '云音乐说唱榜':
            this.id = 3;
            break;
          case '云音乐古典音乐榜':
            this.id = 24;
            break;
          case '云音乐电音榜':
            this.id = 25;
            break;
          case '抖音排行榜':
            this.id = 26;
            break;
          case '新声榜':
            this.id = 27;
            break;
          case '云音乐ACG音乐榜':
            this.id = 22;
            break;
          case '云音乐韩语榜':
            this.id = 28;
            break;
          case '云音乐国电榜':
            this.id = 4;
            break;
          case '英国Q杂志中文版周榜':
            this.id = 29;
            break;
          case '电竞音乐榜':
            this.id = 30;
            break;
          case 'UK排行榜周榜':
            this.id = 5;
            break;
          case '美国Billboard周榜':
            this.id = 6;
            break;
          case 'Beatport全球电子舞曲榜':
            this.id = 21;
            break;
          case 'KTV唛榜':
            this.id = 7;
            break;
          case 'iTunes榜':
            this.id = 8;
            break;
          case '日本Oricon周榜':
            this.id = 10;
            break;
        }

        this.$axios.get(`/api/top/list?idx=${this.id}`)
          .then(res => {
            // console.log(res.data);
            this.rankData.title = res.data.playlist.description !== undefined ? res.data.playlist.description : '';
            this.rankData.backgroundUrl = res.data.playlist.coverImgUrl !== undefined ? res.data.playlist.coverImgUrl : '';
            this.rankData.rankList = res.data.playlist.tracks !== undefined ? res.data.playlist.tracks : [];
            this.rankData.sum = res.data.playlist.tracks !== undefined ? res.data.playlist.tracks.length : '';
            this.rankData.playCount = res.data.playlist.playCount !== undefined ? res.data.playlist.playCount : null;
            this.hasData = true;
            // res.data.playlist
            // res.data.playlist.tracks
            // res.data.playlist.tracks[0].name: 歌名
            // res.data.playlist.tracks[0].ar[0].name: 第一首歌的第一个歌手名字
            // res.data.playlist.tracks[0].id: 歌的id（用于获取歌曲mp3的url）
            // 示例：http://localhost:3000/song/url?id=33894312
            // res.data.playlist.tracks[0].al.picUrl: 歌的封面图片链接
          })
          .catch(err => {console.log(err)});
      }
    },
    activated(){
      // console.log("父组件activited");
      let listName = this.$route.params.topListName;
      this.initList(listName);
      this.title = listName;
    },
    mounted() {
      let listName = this.$route.params.topListName;
      this.initList(listName);
      this.title = listName;
    }
  }
</script>

<style scoped>
  .rank{
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 199;
  }
</style>